<template>

<el-table :data="order.goods" border  
    show-summary :summary-method="getGoodsSummaries"
    style="width: 100%">
    
    <el-table-column prop="" label="商品名称">

        <template #default="scope">
            <img :src="scope.row.image" alt="">
            <div>{{ scope.row.goods_name }}</div>
        </template>    

    </el-table-column>
    <el-table-column prop="goods_price" label="价格（￥）" width="120" >
    </el-table-column>
    <el-table-column prop="goods_num" label="数量" width="90" >
    </el-table-column>

    <el-table-column prop="goods_total" label="总价（￥）"  width="180" >
    </el-table-column>
  </el-table>
    
</template>

<script lang="ts" setup>

import { inject } from 'vue';

const order:any = inject('order')


const getGoodsSummaries = ( param:any ) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column:any, index:any) => {
    if (index === 0) {
      sums[index] = '总计'
      return
    }
    
    if( column.property == 'goods_total' || column.property == 'goods_num'  ){
        const values = data.map((item:any) => Number(item[column.property]))
    
        const strPre = column.property == 'goods_total'?'￥':''
        sums[index] = strPre + ` ${values.reduce((prev:any, curr:any) => {
            const value = Number(curr)
            if (!Number.isNaN(value)) {
            return prev + curr
            } else {
            return prev
            }
        }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
    
  })

  return sums
}
</script>